<!--公司账户-->
<template>
  <div class="uploaddetail">

    <div class="my_header">
      <i class="mui-icon mui-icon-arrowleft" aria-hidden="true" @click="goHistory()"></i>
      <div class="top1">详情</div>
    </div>
    <div class="txlist">
      <div class="row">
        <div class="left">员工姓名</div>
        <div class="right" v-text="userDetail.name"></div>
      </div>
      <div class="row">
        <div class="left">性别</div>
        <div class="right" v-text="userDetail.sex"></div>
      </div>
      <div class="row">
        <div class="left">联系电话</div>
        <div class="right"
             v-text="userDetail.mobile?userDetail.mobile.substring(0,3)+'***'+userDetail.mobile.substring(userDetail.mobile.length,userDetail.mobile.length-3):''"></div>
      </div>
      <div class="row">
        <div class="left">身份证号</div>
        <div class="right"
             v-text="userDetail.card?userDetail.card.substring(0,4)+'***'+userDetail.card.substring(userDetail.card.length,userDetail.card.length-4):''"></div>
      </div>
      <div class="row">
        <div class="left">最高学历</div>
        <div class="right">{{userDetail.education}}</div>
      </div>

      <div class="row">
        <div class="left">所在地区</div>
        <div class="right">{{userDetail.province}}/{{userDetail.city}}</div>
      </div>
      <div class="rowcell">
        <div class="left">名单类型</div>
        <div class="right" style="text-align: right">{{userDetail.lost_type}}</div>
      </div>
      <div class="rowcell">
        <div class="left">事件描述</div>
        <div class="right">{{userDetail.content}}</div>
      </div>

      <div class="rowcell" v-show="userDetail.img.length>0">
        <div class="left">证据展示</div>

        <div class="right">
          <ul class="zhengju">
            <li v-for="(item,index) in userDetail.img" :key="index">
              <img @click="previewImg(index)" :src="item">
              <!-- 点击图片放大预览 -->
            </li>
          </ul>
        </div>

      </div>
      <div class="txlist" style="margin-top:0.1.5rem;border-bottom: 1px solid #efefef;">
        <div class="row">
          <div class="left">工作履历</div>

        </div>

      </div>
      <div class="jyrecord lvli">
        <div v-for="item in userDetail.record_resume">
          <div class="rowcell">
            <div class="item">
              {{item.s_time}}-{{item.e_time}}， {{item.position}}， {{item.salary}}元
            </div>
          </div>
        </div>
      </div>

      <div class="row margintop10">
        <div class="left">追偿金额</div>
        <div class="right">{{userDetail.money}}元</div>
      </div>
      <div class="row">
        <div class="left">所属公司</div>
        <div class="right">{{userDetail.company}}</div>
      </div>

      <div class="row">
        <div class="left">公司电话</div>
        <div class="right">{{userDetail.company_mobile}}</div>
      </div>
      <!--隐藏区域-->
      <div v-show="userDetail.money>0">
        <!-- 隐藏按钮 -->
        <div class="button">
          <button class="btn" @click="hideNow()">立即隐藏</button>
        </div>
      </div>
    </div>

    <hide-pay :isShowPayType="isShowPayType" :userDetail="userDetail" @hidePay="hidePay"></hide-pay>
  </div>
</template>

<script>
  import {ImagePreview} from 'vant';
  import hidePay from '@/components/search/component/inquireDetail-pay';

  export default {
    data() {
      return {
        isShowPayType: false,
        userId: '',
        userDetail: {
          img: [],
          record_resume: [],
        },
        userBalance: 0,
      };
    },
    components: {hidePay},
    created() {
      this.userId = this.$route.query.dataId;
      console.log(this.$route.query);
      this.getDetail();
    },
    methods: {
      hidePay() {
        this.isShowPayType = false;
      },
      getDetail() {
        this.$http.get('api/User_lost/info', {lost_id: this.userId}).then(response => {
          let img = [];
          for (let item of response.data.img) {
            if (item != 'http://zcapi.hrgsxt.cn/') {
              img.push(item);
            }
          }
          response.data.img = img;
          this.getUserEducation(response.data);
        })
      },
      hideNow() {  //点击立即隐藏
        this.isShowPayType = true;
      },
      goHistory() {
        this.$router.go(-1);
      },
      //点击图片放大 预览证据图片
      previewImg(index) {
        ImagePreview({images: this.userDetail.img, startPosition: index});
      },
      getUserEducation(data) { //获取学历枚举
        this.$http.get('api/Welcome/education').then(response => {
          for (let item of response.data) {
            if (item.education_id == data.education_id) {
              data.education = item.name;
              break
            }
          }
          this.userDetail = data;
        });
      }
    },
  };
</script>

<style>
  .el-dialog {
    width: 94% !important;
  }

  /*.el-dialog__header {
    padding: 6px 8px 8px;
}*/
  .el-dialog__body {
    padding: 20px !important;
  }

  /* 余额支付弹窗 */

  .uploaddetail .fdimgdiv img {
    width: 98% !important;
    margin-left: 3% !important;
  }

  .uploaddetail .spanyebz {
    color: red;
    margin-top: .2rem;
    font-size: 0.18rem;
  }

  /* 余额支付窗口 */

  .uploaddetail .paybox {
    width: 5.61rem;
    height: 5.69rem;
    position: absolute;
    top: 20%;
    left: 50%;
    margin-left: -2.8rem;
    padding: 0 0.3rem;
    background-color: #fff;
    z-index: 99;
    position: fixed;
  }

  .uploaddetail .paybox .paytop {
    height: 1rem;
    line-height: 1rem;
  }

  .uploaddetail .paybox .colse {
    width: 0.23rem;
    height: 0.23rem;
    border: 0.001rem dashed #efefef;
  }

  .uploaddetail .paied {
    margin-left: 38%;
    font-size: 0.36rem;
    font-weight: bold;
    color: #333;
  }

  .uploaddetail .paybox .makepsd {
    float: right;
    color: #1b84e3;
    font-size: 0.3rem;
  }

  .uploaddetail .paybox .makepsd a {
    color: #1b84e3;
  }

  .uploaddetail .paybox .money {
    height: 1.6rem;
    line-height: 1.6rem;
    text-align: center;
    color: #333;
    font-size: 0.72rem;
    font-weight: bold;
  }

  .uploaddetail .paybtn {
    width: 100%;
    height: 0.95rem;
    color: #fff;
    font-size: 0.36rem;
    text-align: center;
    background-color: #16ad12;
    margin-top: 0.3rem;
  }

  /* 隐藏按钮 */

  .uploaddetail .button {
    text-align: center;
    background-color: #fff;
    margin-bottom: 0.5rem;
    margin-top: 0.5rem;
  }

  .uploaddetail .btn {
    width: 93.33%;
    height: 0.88rem;
    background: rgba(0, 133, 240, 1);
    border-radius: 0.15rem;
    color: #ffffff;
  }

  /* 遮罩层部分 */

  .uploaddetail .mask {
    width: 100%;
    height: 100%;
    background-color: #000;
    opacity: 0.4;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 22;
  }

  .uploaddetail .content {
    width: 100%;
    height: 64%;
    background: rgba(255, 255, 255, 1);
    border-radius: 25px 25px 0px 0px;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 99;
    margin-bottom: 0.86rem;
  }

  .uploaddetail .lines {
    width: 1.6rem;
    height: 0.1rem;
    background: rgba(204, 204, 204, 1);
    border-radius: 5px;
    margin: 0 auto;
    margin-top: .2rem;
  }

  /* 当前隐藏 */

  .uploaddetail .content .discontent {
    width: 93%;
    height: 1.56rem;
    border: 0.001rem solid #ccc;
    padding-top: 0.29rem;
    line-height: 1.56rem;
    padding-left: 0.2rem;
    margin: .3rem auto;
  }

  .uploaddetail .discontent div {
    font-size: 0.24rem;
    height: 0.4rem;
    line-height: 0.3rem;
    color: #666;
  }

  /* 屏幕等于320以下 */

  @media screen and (width: 320px) {
    .uploaddetail .content {
      height: 66% !important;
      margin-bottom: 0.87rem;
    }
  }

  @media screen and(min-width: 320px)and(max-width: 359px) {
    .uploaddetail .content {
      height: 70% !important;
      margin-bottom: 0.87rem;
    }
  }

  @media screen and(min-width: 360px)and(max-width: 374px) {
    .uploaddetail .content {
      height: 70% !important;
      margin-bottom: 0.87rem;
    }
  }

  @media screen and(min-width: 375px)and(max-width: 385px) {
    .uploaddetail .content {
      height: 70% !important;
      margin-bottom: 0.86rem;
    }
  }

  @media screen and(min-width: 386px)and(max-width: 392px) {
    .uploaddetail .content {
      height: 70% !important;
      margin-bottom: 0.86rem;
    }
  }

  @media screen and(min-width: 393px)and(max-width: 400px) {
    .uploaddetail .content {
      height: 70% !important;
      margin-bottom: 0.86rem;
    }
  }

  @media screen and(min-width: 401px)and(max-width: 414px) {
    .uploaddetail .content {
      height: 65% !important;
      margin-bottom: 0.86rem;
    }
  }

  @media screen and(min-width: 750px)and(max-width: 799px) {
    .uploaddetail .content {
      height: 60% !important;
      margin-bottom: 0.86rem;
    }
  }

  /* 隐藏期限套餐 */

  .uploaddetail .yincang,
  .uploaddetail .paystyle2 {
    padding: 0 .3rem;
    position: relative;
    margin-bottom: .2rem;
  }

  .uploaddetail .paystyle2 {
    margin-bottom: .2rem;
  }

  .uploaddetail #chose {
    position: absolute;
    top: 0;
    left: 0.3rem;
    overflow: hidden;
  }

  .uploaddetail #paystyle {
    position: absolute;
    top: 0;
    left: 0.3rem;
    overflow: hidden;
  }

  .uploaddetail ul {
    width: 100%;
    background-color: #fff;
    padding-top: 0.5rem;
    overflow: hidden;
  }

  .uploaddetail .count {
    margin-top: .2rem;
  }

  .uploaddetail .list {
    width: 29.3%;
    height: 21.3%;
    text-align: center;
    position: relative;
    float: left;
    border: 0.01rem solid #ccc;
  }

  .uploaddetail .one {
    height: 0.26rem;
    font-size: 0.28rem;
    font-family: PingFang-SC-Medium;
    font-weight: 500;
    color: rgba(51, 51, 51, 1);
    line-height: 36px;
  }

  .uploaddetail .price {
    margin-top: 0.39rem;
    line-height: 36px;
  }

  .price .danjia {
    font-size: 0.22rem;
    color: #999;
    padding-right: 0.05rem;
  }

  .uploaddetail .price .money {
    color: #ff3000;
    font-size: 0.5rem;
    height: 0.38rem;
    font-family: PingFang-SC-Medium;
    font-weight: 500;
  }

  .uploaddetail .active {
    border: 0.01rem solid #0085f0;
  }

  .uploaddetail .select {
    position: absolute;
    bottom: 0;
    right: 0;
  }

  /* 支付方式 */

  .uploaddetail h4 {
    font-size: 0.3rem;
    color: #333;
  }

  .uploaddetail .count li {
    float: left;
  }

  .uploaddetail .count li:nth-child(2) {
    margin-left: 0.15rem;
    margin-right: 0.15rem;
  }

  .uploaddetail .count li img {
    width: 2.2rem;
    height: 0.88rem;
  }

  /* 总计 */

  .uploaddetail .total {
    width: 100%;
    height: 0.88rem;
    line-height: 0.88rem;
    border-top: 0.01rem solid #ccc;
    position: fixed;
    bottom: 0;
    background-color: #ffffff;
  }

  .uploaddetail .total .tol {
    padding-left: 0.3rem;
    float: left;
  }

  .uploaddetail .all {
    font-size: 0.3rem;
    color: #333;
  }

  .uploaddetail .all .peo {
    color: #ff3000;
  }

  .uploaddetail #btn {
    display: block;
    width: 2.2rem;
    height: 0.88rem;
    color: #fff;
    font-size: 0.3rem;
    line-height: 0.88rem;
    text-align: center;
    border: none;
    background-color: #0085f0;
    border-radius: 0;
    /* margin-left: 5rem; */
    float: right;
  }

  .uploaddetail .lvli .rowcell .item {
    line-height: 0.5rem !important;
  }

  .uploaddetail .status {
    padding: 0.25rem 0.45rem;
    font-size: 0.3rem;
  }

  .uploaddetail .status img {
    width: 0.35rem;
    height: 0.35rem;
    vertical-align: middle;
    margin-right: 5px;
  }

  .uploaddetail .error {
    color: #fc355d;
  }

  .uploaddetail .shz {
    color: #0085f0;
  }

  .uploaddetail .right {
    color: rgb(62, 185, 88);
  }

  .uploaddetail .zhengju {
    width: 100%;
    height: 100%;
    padding: 0;
  }

  .uploaddetail .zhengju li {
    width: 33.33%;
    height: 1.7rem;
    float: left;
  }

  .uploaddetail .zhengju li img {
    width: 1.4rem;
    height: 1.4rem;
  }

  .uploaddetail .zhengju li:nth-child(3n-1) {
    /* margin-left: .05rem; */
    /* margin-right: .05rem; */
  }

  /*查询记录*/

  .uploaddetail .margintop10 {
    margin-top: 10px;
  }

  .uploaddetail .jyrecord {
    background-color: #ffffff;
    padding-left: 0.7rem;
  }

  .uploaddetail .jyrecord .rowcell {
    width: 100%;
    color: #666666;
    background-color: #ffffff;
    font-size: 0.26rem;
    padding: 0.26rem 0.35rem 0.26rem 0rem !important;
    border-bottom: 1px solid #efefef;
  }

  .uploaddetail .jyrecord .row .item {
    color: #666666;
    width: 100%;
    float: left;
    font-size: 0.28rem;
    line-height: 0.88rem;
    text-align: left;
  }

  .uploaddetail .submit {
    background-color: #0085f0;
    font-size: 0.34rem;
    color: #ffffff;
    width: 90%;
    margin-left: 5%;
    margin-top: 5%;
    height: 0.88rem;
    line-height: 0.88rem;
    border-radius: 12px;
  }

  .uploaddetail .my_header .top1 {
    margin-right: 20px;
  }

  .uploaddetail .my_header {
    height: 0.88rem;
    background: rgba(0, 133, 240, 1);
    text-align: center;
    color: #fff;
    line-height: 0.88rem;
    position: relative;
    padding: 0 0.3rem;
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1;
  }

  .uploaddetail .my_header i {
    font-size: 0.4rem;
    float: left;
    line-height: 0.88rem;
  }

  .uploaddetail .myaccount .my_header .top1 {
    width: 40%;
    margin-left: 25%;
    float: left;
    text-align: center;
  }

  .uploaddetail .myaccount .my_header .cmaccount {
    float: right;
    font-size: 0.28rem;
  }

  .uploaddetail {
    margin-top: 0.88rem;
    margin-bottom: 0.88rem;
  }

  .uploaddetail .txlist .row {
    width: 100%;
    height: 0.88rem;
    background-color: #ffffff;
    line-height: 0.88rem;
    padding: 0px 0.35rem 0px 0.3rem;
    border-bottom: 1px solid #efefef;
  }

  .uploaddetail .txlist .row:last-child {
    border-bottom: none;
  }

  .uploaddetail .txlist .row .left {
    width: 24%;
    float: left;
    font-size: 0.3rem;
  }

  .uploaddetail .txlist .row .left span {
    color: red;
    margin-right: 5px;
    margin-left: -9px;
  }

  .uploaddetail .txlist .row .right {
    color: #666666;
    width: 73%;
    float: right;
    font-size: 0.26rem;
    line-height: 0.88rem;
    text-align: right;
    height: 0.88rem;
  }

  .uploaddetail .txlist .rowcell {
    border-bottom: 1px solid #efefef;
    background-color: #ffffff;
    overflow: auto;
    padding: 0.26rem 0.35rem 0.26rem 0.28rem;
  }

  .uploaddetail .txlist .rowcell .left {
    width: 24%;
    float: left;
    font-size: 0.3rem;
  }

  .uploaddetail .txlist .rowcell .right {
    /* padding-left: 0.3rem; */
    color: #666666;
    width: 75%;
    float: right;
    font-size: 0.26rem;
    line-height: 0.4rem;
    text-align: left;
  }
</style>
